<script setup>
import { ref } from 'vue';
import PublishVideo from './components/PublishVideo/index.vue';
import ManageVideos from './components/ManageVideos/index.vue';

// Tab 状态管理
const activeTab = ref('publish');

const switchTab = (tab) => {
    activeTab.value = tab;
};
</script>

<template>
    <div class="main">
        <div class="tabs">
            <div class="tab-item" :class="{ active: activeTab === 'publish' }" @click="switchTab('publish')">
                发布视频
            </div>
            <div class="tab-item" :class="{ active: activeTab === 'manage' }" @click="switchTab('manage')">
                视频管理
            </div>
        </div>

        <div class="content">
            <PublishVideo v-if="activeTab === 'publish'" />
            <ManageVideos v-else />
        </div>
    </div>
</template>

<style scoped lang="scss">
.main {
    height: 100%;
    width: 100%;
    background-color: #161823;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    background-color: #1f2129;
    border-radius: 16px 16px 0 0;
}

.tab-item {
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    color: #666;

    &.active {
        color: #1890ff;
        font-weight: 500;

        &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #1890ff;
        }
    }

    &:hover {
        color: #1890ff;
    }
}

.content {
    flex: 1;
    overflow-y: auto;
    background-color: #272933;
    padding-top: 20px;
    padding-bottom: 20px;

    /* 隐藏滚动条但保持滚动功能 */
    /* Webkit浏览器（Chrome、Safari、新版Edge） */
    &::-webkit-scrollbar {
        width: 0;
        display: none;
    }

    /* Firefox */
    scrollbar-width: none;

    /* IE 和旧版 Edge */
    -ms-overflow-style: none;
}
</style>
